<template>
	<div class="SB">
		<div class="room_top">
			<div class="room_top_search">
				<u-search placeholder="请输入设备名称/编号" v-model="keyword" @custom='searchEvnet' @click='searchEvnet'
					@search='searchEvnet'></u-search>
			</div>
			<div class="room_top_select">
				<div class="room_top_select_items" v-for="(item,index) in list" :key="index" @click='closeEvent(index)'>
					<span>{{item.name}}</span>
					<u-icon name="arrow-up-fill" color='#ABABAB' size='13' style="margin-left: 20rpx;"
						v-if="item.status == 2"></u-icon>
					<u-icon name="arrow-down-fill" color='#ABABAB' size='13' style="margin-left: 20rpx;" v-else>
					</u-icon>

				</div>
			</div>
		</div>
		<!-- right -->
		<div class="rightBtn">
			<u-icon name="plus-circle-fill" color="#2E61FF" size="48" @click='addEvent'> </u-icon>

		</div>
		<!-- 滚动层 -->
		<div class="roomScroll">
			<sblist :list='floorList' style="height: 100%;" @closeEvnet='closeEvnet' @upDate='upDate' ref="sblist">
			</sblist>
		</div>

		<!-- 下拉 -->
		<u-picker :show="show" :closeOnClickOverlay='true' @close='cancel' :columns="columns" @confirm='confirm'
			@cancel='cancel' keyName="label"></u-picker>
		<u-picker :show="showT" :closeOnClickOverlay='true' @close='cancel' :columns="columnsT" @confirm='confirmT'
			@cancel='cancel' keyName="label"></u-picker>
		<frool v-if="showF" :closeOnClickOverlay='true' @close='cancel' :froolShow='showF' @confirm='FroolConfirm'
			@cancel='showF=false'></frool>
		<!-- 选中后操作 -->
		<div class="sbBtn">
			<div class="sbBtn_left" @click='quxiaoEvent'>
				取消选择
			</div>
			<div class="sbBtn_right" @click='zyEvent'>
				选房转移
			</div>
		</div>
		<!--  -->
		<div id="tabar">
			<tabar :value4='3'></tabar>
		</div>
	</div>
</template>

<script>
	import tabar from '@/pagesA/components/tabar.vue'
	import frool from '@/pages/server/components/frool.vue'
	import sblist from '@/pagesA/components/sbList.vue'
	export default {
		components: {
			tabar,
			frool,
			sblist
		},
		data() {
			return {
				keyword: '',
				list: [{
					name: '设备状态',
					status: 1,
				}, {
					name: '设备类型',
					status: 1,
				}, {
					name: '位置筛选',
					status: 1,
				}],
				// 电脑、屏幕、声卡、麦克风、灯具、无线耳机、手机、杂项
				columnsT: [
					[{
							label: '全部',
							id: 'all'
						},
						{
							label: '电脑',
							// 其他属性值
							id: '-1'
							// ...
						}, {
							label: '屏幕',
							id: 1
						}, {
							label: '声卡',
							id: 2
						}, {
							label: '麦克风',
							id: 3
						}, {
							label: '灯具',
							id: 4
						}, {
							label: '无线耳机',
							id: 5
						}, {
							label: '手机',
							id: 6
						}, {
							label: '杂项',
							id: 7
						}
					]
				],
				// 	1正常 2维修中 3报废 4故障
				columns: [
					[{
						label: '全部',
						id: 'all'
					}, {
						label: '正常',
						// 其他属性值
						id: 1
						// ...
					}, {
						label: '维修中',
						id: 2
					}, {
						label: '报废',
						id: 3
					}, {
						label: '故障',
						id: 4
					}, ]
				],
				show: false,
				showT: false,
				showF: false,
				status: '',
				type: '',
				floor_id: '',
				storey_id: '',
				room_id: '',
				floorList: []
			}
		},
		onPullDownRefresh() {
			this.list[0].name = '设备状态'
			this.list[1].name = '设备类型'
			this.list[2].name = '位置筛选'
			this.page = 1
			this.floorList = []
			this.getfool()
		},
		onShow() {
			this.page = 1
			this.floorList = []
			this.getfool()
		},
		methods: {
			searchEvnet() {
				console.log('111')
				this.page = 1
				this.floorList = []
				this.getIndexMessage()
			},
			closeEvnet(idx) {
				this.floorList[idx].statusShow = !this.floorList[idx].statusShow
			},
			// 取消选择
			quxiaoEvent() {
				for (var i in this.floorList) {
					this.floorList[i].statusShow = false
				}
			},
			// 转移
			zyEvent() {
				this.$refs.sblist.zyEvent()
			},
			addEvent() {
				uni.navigateTo({
					url: '/pagesA/index/SB/sbDetail?id=' + undefined
				})
			},
			upDate() {
				this.page = 1
				this.floorList = []
				this.getIndexMessage()
				this.quxiaoEvent()
			},
			async getfool() {
				const picker = this.$refs.uPicker
				const {
					data
				} = await this.$request(this.$Api.anchorFloor, {

				}, "POST")
				uni.stopPullDownRefresh()
				if (data.code !== 0) return
				// this.columnsF = data.data.list
				// this.floor_id = data.data.list[0].floor_id
				// if (data.data.list[0].storey) {
				// 	this.storey_id = data.data.list[0].storey[0].storey_id
				// 	if (data.data.list[0].storey[0].room) {
				// 		this.room_id = data.data.list[0].storey[0].room[0].room_id
				// 	}
				// }
				this.getIndexMessage()
			},
			async getIndexMessage() {
				const {
					data
				} = await this.$request(this.$Api.equipmentList, {
					storey_id: this.storey_id,
					floor_id: this.floor_id,
					room_id: this.room_id,
					type: this.type == '全部' ? '' : this.type,
					status: this.status == 'all' ? '' : this.status,
					page: this.page,
					keyword: this.keyword
				}, "POST")
				if (data.code !== 0) return
				for (var i in data.data.list) {
					data.data.list[i].statusShow = false
				}
				this.floorList = this.floorList.concat(data.data.list)
				console.log('111', this.message)
			},
			closeEvent(e) {
				if (e == 0) {
					this.show = true
				} else if (e == 1) {
					this.showT = true
				} else {
					this.showF = true
				}
			},
			cancel() {
				console.log(111)
				this.showT = this.showF = this.show = false
			},
			// '主播状态', '主播类型', '楼层筛选'
			confirm(e) {
				console.log('111', e)
				this.status = e.value[0].id
				if (e.value[0].label == '全部') {
					this.list[0].name = '设备状态'
					this.list[0].status = 1
				} else {
					this.list[0].name = e.value[0].label
					this.list[0].status = 2
				}
				this.showT = this.showF = this.show = false
				this.page = 1
				this.floorList = []
				this.getIndexMessage()
			},

			async FroolConfirm(e) {
				console.log("111", e)
				this.list[2].name = e.floor_name + e.storey_name + e.room_name
				this.floor_id = e.floor_id
				this.storey_id = e.storey_id
				this.room_id = e.room_id || 1
				this.page = 1
				this.floorList = []
				this.showF = this.show = false
				this.getIndexMessage()
			},
			confirmT(e) {
				this.type = e.value[0].label
				console.log('3333', e)
				this.showT = this.showF = this.show = false
				// this.list[1] = e.value[0].label
				if (e.value[0].label == '全部') {
					this.list[1].name = '设备类型'
					this.list[1].status = 1
				} else {
					this.list[1].name = e.value[0].label
					this.list[1].status = 2
				}
				this.page = 1
				this.floorList = []
				this.getIndexMessage()
			},
		}
	}
</script>

<style lang="less">
	.room_top {
		width: 750rpx;
		height: 216rpx;
		background: #FFFFFF;
		position: fixed;
		top: 0;
		z-index: 9;

		.room_top_search {
			padding: 30rpx;
			box-sizing: border-box;
		}

		.room_top_select {
			display: flex;
			align-items: flex-start;
			justify-content: center;
			padding: 0 30rpx;
			box-sizing: border-box;
			width: 100%;
			height:40rpx;
			margin-top: 10rpx;
		}

		.room_top_select_items {
			font-size: 24rpx;
			color: #666666;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 33.33%;

			span {
				margin-right: 10rpx;
			}
		}
	}

	.roomScroll {
		height: calc(100% - 336rpx);
		overflow: scroll;
		margin-top: 218rpx;
		// display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 280rpx;
		// z-index: -1;
	}

	.rightBtn {
		position: fixed;
		right: 30rpx;
		bottom: 15%;
		z-index: 999;
	}

	.sbBtn {
		display: flex;
		position: fixed;
		bottom: 92rpx;
		z-index: 9;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 92rpx;

		.sbBtn_left,
		.sbBtn_right {
			width: 50%;
			height: 100%;
			background: #D8D8D8;
			text-align: center;
			line-height: 92rpx;
			color: #333;
			font-size: 28rpx;
		}

		.sbBtn_right {
			color: #fff;
			background: #2D60FF;
		}
	}
</style>
